<template>
	<div>
		<Header :currentIndex="currentIndex" @handelClick="handelClickHeader" @changeLanguage="changeLanguage"
			:class="{ 'header-home': headerHome }" />
		<div class="banner" v-if="isPC">
			<div class="text">
				<div class="h1">
					<span v-for="(item, index) in h1" :key="index">{{ item }}<br /></span>
				</div>
				<div class="h2">{{ h2 }}</div>
			</div>
		</div>
		<div class="mobile-banner" v-if="!isPC">
			<img src="../assets/index-banner.jpg" />
			<div class="text">
				<div class="h1">
					<span v-for="(item, index) in h1" :key="index">{{ item }}<br /></span>
				</div>
				<div class="h2">{{ h2 }}</div>
			</div>
		</div>
		<index-title :title="titles[0]" name="项目介绍" id="introduction" />
		<div class="introduction">
			<div class="item" @click="toIntroduction">
				<img src="../assets/jianjie1.jpg" />
				<p class="name">{{ institute[0] }}</p>
			</div>
			<div class="item" @click="toIntroduction">
				<img src="../assets/jianjie2.png" />
				<p class="name">{{ institute[1] }}</p>
			</div>
		</div>


		<index-title :title="titles[1]" name="产业政策" id="policy" />
		<div class="policy">
			<div class="item">
				<div class="policy-img" @click="toPolicyList(1)">
					<img src="../assets/cyzc1.jpg" />
					<span class="t">{{ policy_subtitle[0] }}</span>
				</div>
				<div class="policy-list">
					<div v-for="(item, index) in policyList1" :key="index">
						<div class="desc" @click="toDetails(item)">{{ item.name }}</div>
					</div>
				</div>
				<div class="more" @click="toPolicyList(1)">{{ more }}</div>
			</div>
			<div class="item">
				<div class="policy-img" @click="toPolicyList(2)">
					<img src="../assets/cyzc2.jpg" />
					<span class="t">{{ policy_subtitle[1] }}</span>
				</div>
				<div class="policy-list">
					<div v-for="(item, index) in policyList2" :key="index">
						<div class="desc" @click="toDetails(item)">{{ item.name }}</div>
					</div>
				</div>
				<div class="more" @click="toPolicyList(2)">{{ more }}</div>
			</div>
			<div class="item">
				<div class="policy-img" @click="toPolicyList(3)">
					<img src="../assets/cyzc3.jpg" />
					<span class="t">{{ policy_subtitle[2] }}</span>
				</div>
				<div class="policy-list">
					<div v-for="(item, index) in policyList3" :key="index">
						<div class="desc" @click="toDetails(item)">{{ item.name }}</div>
					</div>
				</div>
				<div class="more" @click="toPolicyList(3)">{{ more }}</div>
			</div>
		</div>

		
		<index-title :title="titles[2]" name="动态" id="news" />
		<div class="news">
			<template v-if="newsList.length > 0">
				<div class="news-list">
					<div class="news-item" @click="toDetails(item)" v-for="(item, index) in newsList" :key="index">
						<div class="image">
							<img :src="item.img" />
						</div>
						<div class="text">
							<div class="title">{{ item.name }}</div>
							<div class="date">
								<span>{{ item.date }}</span>
							</div>
							<div class="desc">{{ item.desc }}</div>
						</div>
					</div>
				</div>
				<div class="more" @click="toNews">{{ more }}</div>
			</template>
			<template v-else>
				<div class="empty">{{ emptyText }}</div>
			</template>
		</div>


		<index-title :title="titles[3]" name="项目进展" />
		<div class="tab" id="tab">
			<div class="item" v-for="(item, index) in tabList" :key="index" :class="{ active: index === tabIndex }"
				@click="handleTabClick(item, index)">
				{{ item }}
			</div>
		</div>
		<div class="project">
			<div class="project-info">
				<template v-if="project.length > 0">
					<div @click="toDetails(item)" v-for="(item, index) in project" :key="index" class="item"
						:style="'background-image:url(' + item.img + ')'">
						<p class="name">{{ item.name }}</p>
						<div class="tag">{{ item.tag }}</div>
					</div>
				</template>
				<template v-else>
					<div class="empty">{{ emptyText }}</div>
				</template>
			</div>
			<div class="more" @click="toProject">{{ more }}</div>
		</div>
		
		<index-title :title="titles[4]" name="公示专区" />
		<div class="publicity" id="publicity">
			<div class="pub-item">
				<div class="pub-tilte">{{ city }}</div>
				<div class="pub-tab">
					<div class="pub-tab-item" v-for="(item, index) in pubTab" :key="index"
						@click="handlePubtabClick(item, index)" :class="{ active: pubTabIndex === index }">
						{{ item }}
					</div>
				</div>
				<div class="pub-list">
					<template v-if="pubList.length > 0">
						<div @click="toDetails(item)" class="pub-list-item" v-for="(item, index) in pubList"
							:key="index">
							<span class="name">{{ item.name }}</span><span class="date">{{ item.date }}</span>
						</div>
					</template>
					<template v-else>
						<div class="empty">{{ emptyText }}</div>
					</template>
				</div>
				<div class="more" @click="toAnnouncement(++pubTabIndex)">
					{{ more }}
				</div>
			</div>
			<div class="pub-item">
				<div class="pub-tilte">{{ join_title }}</div>
				<div class="pub-sub-title">
					<div class="name">{{ join }}</div>
					<div class="date">{{ time }}</div>
				</div>
				<div class="pub-list">
					<template v-if="jobList.length > 0">
						<div @click="toDetails(item)" class="pub-list-item" v-for="(item, index) in jobList"
							:key="index">
							<span class="name">{{ item.name }}</span><span class="date">{{ item.date }}</span>
						</div>
					</template>
					<template v-else>
						<div class="empty">{{ emptyText }}</div>
					</template>
				</div>
				<div class="more" @click="toAnnouncement(3)">{{ more }}</div>
			</div>
		</div>

		

		

		<Footer />
	</div>
</template>

<script>
	const ScrollTop = (number = 0, time) => {
		if (!time) {
			document.body.scrollTop = document.documentElement.scrollTop = number;
			return number;
		}
		const spacingTime = 20; // 设置循环的间隔时间  值越小消耗性能越高
		let spacingInex = time / spacingTime; // 计算循环的次数
		let nowTop = document.body.scrollTop + document.documentElement.scrollTop; // 获取当前滚动条位置
		let everTop = (number - nowTop) / spacingInex; // 计算每次滑动的距离
		let scrollTimer = setInterval(() => {
			if (spacingInex > 0) {
				spacingInex--;
				ScrollTop((nowTop += everTop));
			} else {
				clearInterval(scrollTimer); // 清除计时器
			}
		}, spacingTime);
	};
	import Header from "@/components/Header";
	import Footer from "@/components/Footer";
	import IndexTitle from "@/components/IndexTitle";
	import {
		home,
		policy,
		more,
		empty
	} from "@/lang";
	import {
		getProject,
		getPublicity,
		getIndexPolicy,
		getNews
	} from "@/api";
	const winHeight = window.screen.height;
	const offsetTop = [winHeight- 150, winHeight+370, winHeight + 930 ]
	export default {
		name: "home",
		components: {
			Header,
			Footer,
			IndexTitle,
		},
		data() {
			return {
				currentIndex: "-1",
				langCode: "",
				project: [],
				langData: home,
				langMore: more,
				tabList: [],
				tabIndex: 0,
				pubTab: [],
				pubTabIndex: 0,
				pubList: [],
				jobList: [],
				titles: [],
				policy: policy,
				policyList1: [],
				policyList2: [],
				policyList3: [],
				policy_subtitle: [],
				more: "",
				time: "",
				newsList: [],
				institute: [],
				headerHome: true,
				join: "",
				join_title: "",
				city: "",
				h1: [],
				h2: "",
				hasData: false,
				empty: empty,
				emptyText: "",
				isPC: false
			};
		},
		mounted() {
			this.isPC = this.getIsPC();
			const lang = localStorage.getItem("lang");
			let self = this;
			this.langCode = lang === "ZH" ? 0 : 1;
			this.setPageLanguage(lang);
			if (!this.isPC) {
				self.onSend();
			}
			let wh = window.screen.height - 200;
			let tab = document.getElementById("tab").offsetTop -  window.screen.height;
			window.onscroll = function() {
				let top = document.documentElement.scrollTop || document.body.scrollTop;
				if (top >= wh) {
					self.headerHome = false;
				} else {
					self.headerHome = true;
				}
				if (top >= tab) {
					if (!self.hasData) {
						self.onSend();
						self.hasData = true;
					}
				}
			};
			self.setScrollTop();
		},
		methods: {
			getIsPC() {
				let userAgentInfo = navigator.userAgent;
				let Agents = new Array(
					"Android",
					"iPhone",
					"SymbianOS",
					"Windows Phone",
					"iPad",
					"iPod"
				);
				let flag = true;
				for (let v = 0; v < Agents.length; v++) {
					if (userAgentInfo.indexOf(Agents[v]) > 0) {
						flag = false;
						break;
					}
				}
				return flag;
			},
			onSend() {
				this.getData();
				this.getPublicity();
				this.getJobList();
				this.getIndexPolicy();
				this.getNews();
			},
			setScrollTop() {
				const index = this.$store.state.scrollIndex;
				if (index == -1) {
					ScrollTop(0, 200);
					return false;
				}
				if (index === 0) {
					ScrollTop(offsetTop[0], 200);
					return false;
				}
				if (index === 1) {
					ScrollTop(offsetTop[1], 200);
					return false;
				}
				if (index === 2) {
					ScrollTop(offsetTop[2], 200);
					return false;
				}
			},
			async getData(status) {
				let self = this;
				const res = await getProject({
					status: status || 0,
					lang: self.langCode,
				});
				res.project.forEach((item) => {
					item.img = `${process.env.VUE_APP_BASE_API}/${item.image}`;
					let tag = this.tabList[item.status];
					if (tag.length === 5) {
						tag = tag.substring(0, 3);
					}
					item.tag = tag;
				});
				this.project = res.project;
			},
			async getPublicity(type) {
				let self = this;
				const res = await getPublicity({
					type: type || 1,
					lang: self.langCode,
				});
				this.pubList = res.publicity;
			},
			async getJobList() {
				let self = this;
				const res = await getPublicity({
					type: 3,
					lang: self.langCode,
				});
				this.jobList = res.publicity;
			},
			async getIndexPolicy() {
				let self = this;
				const res = await getIndexPolicy({
					lang: self.langCode,
				});
				this.policyList1 = res.policy_1;
				this.policyList2 = res.policy_2;
				this.policyList3 = res.policy_3;
			},
			async getNews() {
				let self = this;
				const res = await getNews({
					lang: self.langCode,
				});
				res.news.forEach((item) => {
					item.img = `${process.env.VUE_APP_BASE_API}/${item.image}`;
				});
				this.newsList = res.news;
			},
			handleTabClick(item, index) {
				this.tabIndex = index;
				this.getData(index);
			},
			handelClickHeader() {
				this.setScrollTop();
			},
			setPageLanguage(_lang) {
				const lang = _lang.toLowerCase();
				this.tabList = this.langData.tab[lang];
				this.pubTab = this.langData.pubTab[lang];
				this.titles = this.langData.titles[lang];
				this.more = this.langMore[lang];
				this.institute = this.langData.institute[lang];
				this.city = this.langData.publicity.city[lang];
				this.join = this.langData.publicity.join[lang];
				this.join_title = this.langData.publicity.join_title[lang];
				this.time = this.langData.publicity.time[lang];
				this.policy_subtitle = this.policy.sub_title[lang];
				this.h1 = this.langData.h1[lang];
				this.h2 = this.langData.h2[lang];
				this.emptyText = this.empty[lang];
			},
			changeLanguage(lang) {
				this.langCode = lang === "ZH" ? 0 : 1;
				this.setPageLanguage(lang);
				this.onSend();
			},
			handlePubtabClick(item, index) {
				this.pubTabIndex = index;
				this.getPublicity(++index);
			},
			toProject() {
				this.$router.push({
					path: "/project_introduction",
				});
			},
			toAnnouncement(index) {
				this.$router.push({
					path: "/publicity_list",
					query: {
						type: index,
					},
				});
			},
			toPolicyList(type) {
				this.$router.push({
					path: "/policy_list",
					query: {
						type: type,
					},
				});
			},
			toNews() {
				this.$router.push({
					path: "/news",
				});
			},
			toDetails(item) {
				localStorage.setItem("details", JSON.stringify(item));
				this.$router.push({
					path: "/details_page",
				});
			},
			toIntroduction() {
				this.$router.push({
					path: "/institute_introduction",
				});
			},
		},
	};
</script>

<style scoped lang="less">
	.tab {
		width: 1200px;
		margin: 0 auto;
		text-align: center;
		margin-bottom: 30px;
		margin-top: 40px;

		.item {
			display: inline-block;
			height: 30px;
			line-height: 30px;
			color: #a1c2bd;
			padding: 0 10px;
			margin-right: 10px;
			border-radius: 25px;
			cursor: pointer;
		}

		.item.active {
			background-color: #255389;
			color: #fff;
		}
	}

	.project {
		width: 1200px;
		margin: 0 auto;

		.project-info {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}

		.item {
			position: relative;
			width: 585px;
			position: relative;
			height: 300px;
			background-size: cover;
			background-position: center;
			margin-bottom: 30px;
			overflow: hidden;
			cursor: pointer;

			.tag {
				position: absolute;
				right: 0;
				top: 0;
				background-color: #2f679b;
				color: #fff;
				text-align: center;
				height: 35px;
				line-height: 35px;
				width: 130px;
				background: url(../assets/tab-bg.png) no-repeat;
				background-size: cover;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			p {
				position: absolute;
				left: 0;
				bottom: 0px;
				padding: 20px;
				color: #fff;
				background-color: #000;
				width: 100%;
				opacity: 0.8;
			}
		}
	}

	.publicity {
		width: 1200px;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.pub-item {
			width: 585px;

			.pub-tilte {
				font-size: 18px;
				color: #333333;
				font-weight: 600;
				text-align: center;
				margin-bottom: 10px;
			}

			.pub-sub-title {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				color: #717171;
				font-weight: 600;
				height: 40px;
				line-height: 40px;
				background-color: #eeeaf3;

				.name {
					margin-left: 15px;
				}

				.date {
					margin-right: 15px;
				}
			}
		}

		.pub-tab {
			.pub-tab-item {
				display: inline-block;
				cursor: pointer;
				height: 40px;
				line-height: 40px;
				background-color: #eeeaf3;
				color: #333;
				text-align: center;
				width: 50%;
				font-weight: 600;
			}

			.pub-tab-item.active {
				background-color: #255389;
				color: #fff;
			}
		}

		.pub-list {
			margin-bottom: 15px;
			height: 150px;

			.pub-list-item {
				display: flex;
				justify-content: space-between;
				height: 50px;
				line-height: 50px;
				cursor: pointer;
				color: #474747;

				span {
					display: block;
				}

				span:nth-child(1) {
					margin-left: 15px;
				}

				span:nth-child(2) {
					margin-right: 15px;
				}
			}

			.pub-list-item:hover {
				color: #255389;
				text-decoration: underline;
			}

			.pub-list-item:nth-of-type(even) {
				background-color: #eeeaf3;
			}
		}
	}

	.news {
		width: 1200px;
		margin: 0 auto;

		.news-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}

		.news-item {
			width: 585px;
			display: flex;
			justify-content: space-between;
			margin-bottom: 15px;
			cursor: pointer;

			.image {
				width: 280px;
				cursor: pointer;

				img {
					width: 100%;
				}
			}

			.text {
				width: 280px;
				margin-left: 10px;
				cursor: pointer;
				color: #787878;
				line-height: 21px;

				.title {
					margin-bottom: 10px;
					font-weight: 600;
					word-break: keep-all;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					font-size: 18px;
					font-weight: 600;
				}

				.title:hover {
					color: #255389;
				}

				.date {
					text-align: right;
					margin-bottom: 20px;
					border-bottom: 3px solid #aeccc8;

					span {
						display: inline-block;
						background-color: #fff;
						width: 100px;
						position: relative;
						top: 10px;
					}
				}

				.desc {
					height: 88px;
					overflow: hidden;
				}

				.desc:hover {
					color: #255389;
				}
			}
		}
	}

	.more {
		text-align: right;
		color: #255389;
		font-weight: 600;
		cursor: pointer;
	}

	.more:hover {
		text-decoration: underline;
	}

	.introduction {
		display: flex;
		flex-wrap: wrap;
		width: 1200px;
		margin: 0 auto;
		justify-content: space-between;

		.item {
			width: 585px;
			cursor: pointer;

			img {
				display: block;
				width: 100%;
			}

			.name {
				height: 40px;
				line-height: 40px;
				text-align: center;
				color: #fff;
				margin-top: 10px;
				background-color: #2f679b;
			}
		}
	}

	.policy {
		display: flex;
		flex-wrap: wrap;
		width: 1200px;
		margin: 0 auto;
		justify-content: space-between;

		.policy-list {
			height: 102px;
		}

		.policy-img {
			position: relative;
			overflow: hidden;
			margin-bottom: 15px;

			.t {
				display: block;
				position: absolute;
				text-align: center;
				color: #fff;
				font-size: 28px;
				font-weight: 600;
				width: 90%;
				left: 5%;
				top: 50%;
				z-index: 100;
				line-height: 1;
				margin-top: -14px;
			}
		}

		.item {
			width: 390px;
			cursor: pointer;

			.desc {
				word-break: keep-all;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				margin-top: 15px;
				margin-bottom: 15px;
			}

			.desc:hover {
				color: #255389;
				text-decoration: underline;
			}

			img {
				display: block;
				width: 100%;
			}
		}

		.item:nth-child(2) {
			margin: 0 15px;
		}
	}

	.banner {
		position: relative;
		height: 100vh;
		background: url(../assets/index-banner.jpg) center center no-repeat;
		background-size: cover;
		width: 100%;

		.text {
			width: 800px;
			position: absolute;
			left: 50%;
			margin-left: -500px;
			bottom: 25%;
			color: #fff;

			.h1 {
				font-size: 50px;
				font-weight: 600;
				line-height: 1.1;
			}

			.h2 {
				line-height: 1;
				font-size: 20px;
				margin-top: 20px;
			}
		}
	}

	.mobile-banner {
		position: relative;
		// width:1200px;
		// margin:0 auto;
		overflow: hidden;

		img {
			display: block;
			width: 100%;
		}

		.text {
			width: 800px;
			position: absolute;
			left: 50%;
			margin-left: -500px;
			bottom: 25%;
			color: #fff;

			.h1 {
				font-size: 50px;
				font-weight: 600;
				line-height: 1.1;
			}

			.h2 {
				line-height: 1;
				font-size: 20px;
				margin-top: 20px;
			}
		}
	}

	.empty {
		width: 100%;
		font-weight: 600;
		padding: 50px 0;
		text-align: center;
	}
</style>
